<!--
 * @Author: wuheng wuheng@szhbzc.com
 * @Date: 2024-12-16 15:31:20
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2025-01-06 20:29:10
 * @FilePath: \hbzc-groupmeal-center-web\src\Public-UIlibrary\pb-drawer\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-drawer v-model="isVisible" :title="title" :direction="direction" :size="size" class="drawerheaders"
    :close-on-press-escape="false" :close-on-click-modal="false" :before-close="closeModal"
    style="border-radius: 20px 20px 0 0;">
    <div class="flex flex-col h-100%">
      <slot name="header">

      </slot>

      <div class="flex-1">
        <slot></slot>
      </div>

      <div v-if="$slots.footer">
        <slot name="footer"></slot>
      </div>
      <div class="drawerfooter" v-if="showFoot && !$slots.footer">
        <div class="footerBtn">
          <pb-button size="small" @click="closeModal" secondary class="Leftbt">{{ cancelText }}</pb-button>
          <pb-button size="small" @click="handleClose">
            {{ ConfirmText }}
          </pb-button>
        </div>
      </div>

    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
const isVisible = ref(false)
const emit = defineEmits(['cancelFn', 'confirmFn', "update:modelValue"])
const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  size: {
    type: String,
    default: '30%'
  },
  ConfirmText: {
    type: String,
    default: '确认'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  showFoot: {
    type: Boolean,
    default: true
  },
  direction: {
    default: 'btt' as any
  }
})
const closeModal = () => {
  // emit('update:modelValue', false)
  emit('cancelFn')
}
const handleClose = () => {
  // emit('update:modelValue', false)
  emit('confirmFn')
}
</script>
<style lang="scss">
.drawerheaders {
  .el-drawer__header {
    margin-bottom: 0;
    padding-bottom: 20px;
    border: 1px solid #e5e5e5;
  }

  .el-drawer__title {
    color: #262626 !important
  }

  .el-drawer__body {
    padding-top: 0;
  }
}
</style>
<style lang="scss" scoped>
::v-deep ::v-deep .el-drawer {
  border-radius: 20%;
}

.drawerheaders {
  color: #262626 !important
}

.drawerfooter {
  .center {
    margin-bottom: 64px;
    height: 100%;
  }

  .footerBtn {
    display: flex;
    justify-content: flex-end;
    padding: 16px;
    z-index: 100;

    .Leftbt {
      margin-right: 8px;
    }
  }
}
</style>